<template>
  <super-table
    :data="list"
    :columns="columns"
    show-collapse
    :total="pagination.total"
    :current-page="pagination.page"
    :page-size="pagination.rows"
    @pageChange="pageChange"
  >
    <template #header>
      <filter-item label="ID">
        <n-input class="mw-200" placeholder="请输入id查询" clearable />
      </filter-item>
    </template>
  </super-table>
</template>

<script setup>
import { NButton } from 'naive-ui'
import { ref, reactive, h } from 'vue'

// 表格数据
const list = ref([
  { id: 1, name: '陈', age: 18 },
  { id: 2, name: '陈', age: 18 },
  { id: 3, name: '陈', age: 18 },
  { id: 1, name: '陈', age: 18 },
  { id: 2, name: '陈', age: 18 },
  { id: 3, name: '陈', age: 18 },
  { id: 1, name: '陈', age: 18 },
  { id: 2, name: '陈', age: 18 },
  { id: 3, name: '陈', age: 18 },
  { id: 1, name: '陈', age: 18 },
  { id: 2, name: '陈', age: 18 },
  { id: 3, name: '陈', age: 18 },
  { id: 1, name: '陈', age: 18 },
  { id: 2, name: '陈', age: 18 },
  { id: 3, name: '陈', age: 18 },
  { id: 1, name: '陈', age: 18 },
  { id: 2, name: '陈', age: 18 },
  { id: 3, name: '陈', age: 18 }
])

// 表格列
const columns = [
  {
    title: 'ID',
    key: 'id'
  },
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '年龄',
    key: 'age'
  },
  {
    title: '操作',
    render: ({ id }) => {
      return h(
        NButton,
        {
          size: 'small',
          type: 'info',
          onClick: () => clickRow(id)
        },
        { default: () => '点击' }
      )
    }
  }
]

// 分页数据
const pagination = reactive({
  total: 100,
  page: 1,
  rows: 20
})

// 分页器改变时的回调
function pageChange (current, size) {
  console.log(current, size)
  pagination.page = current
  pagination.rows = size
}

// 点击按钮
function clickRow (name) {
  alert(name)
}
</script>

<style scoped>

</style>
